<template>
  <div
      class="fixed z-50 drag-ball cursor-move transition-all duration-300"
      draggable="true"
      @dragstart="dragstart"
      @dragend="dragend"
      @mouseenter="isHovered = true"
      @mouseleave="isHovered = false"
      :style="{
      right: elRight + 'px',
      bottom: elBottom + 'px',
      transform: isDragging ? 'scale(1.05)' : 'scale(1)',
      boxShadow: isDragging
        ? '0 0 20px rgba(0, 0, 0, 0.3)'
        : '0 5px 15px rgba(0, 0, 0, 0.2)',
    }"
  >
    <!-- 正常状态 - 圆形按钮 -->
    <div
        v-if="!isHovered"
        class="rounded-full shadow-lg flex items-center justify-center"
        :style="{
        width: size + 'px',
        height: size + 'px',
        backgroundColor: color,
      }"
    >
      <font-awesome-icon icon="question-circle" class="text-white text-xl" />
    </div>

    <!-- 悬停状态 - 展开显示文字 -->
    <div
        v-else
        class="flex items-center bg-white rounded-full shadow-lg py-2 px-4 transition-all duration-300"
        :style="{ boxShadow: '0 5px 15px rgba(0, 0, 0, 0.2)' }"
    >
      <div class="rounded-full flex items-center justify-center mr-2"
           :style="{ width: size * 0.8 + 'px', height: size * 0.8 + 'px', backgroundColor: color }">
        <font-awesome-icon icon="question-circle" class="text-white" />
      </div>
      <span class="text-gray-800 font-medium whitespace-nowrap">合同系统AI助手</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FloatingBall',
  props: {
    size: {
      type: Number,
      default: 60,
    },
    color: {
      type: String,
      default: '#007BFF',
    },
  },
  data() {
    return {
      startclientX: 0, // 记录开始的横坐标位置
      startclientY: 0, // 记录开始的纵坐标位置
      elRight: 30,     // 定位-初始位置
      elBottom: 30,    // 定位-初始位置
      isDragging: false,
      isHovered: false,
      windowWidth: window.innerWidth,
      windowHeight: window.innerHeight,
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    // 窗口大小变化处理
    handleResize() {
      this.windowWidth = window.innerWidth
      this.windowHeight = window.innerHeight
    },

    // 拖拽开始事件
    dragstart(e) {
      // 记录拖拽元素初始位置
      this.startclientX = e.clientX
      this.startclientY = e.clientY
      this.isDragging = true
      this.isHovered = false

      // 设置拖拽图像为透明，使用原生拖拽时默认会有一个拖拽预览
      const crt = document.createElement('img')
      crt.src = ''
      e.dataTransfer.setDragImage(crt, 0, 0)
    },

    // 拖拽完成事件
    dragend(e) {
      this.isDragging = false

      // 计算偏移量
      const x = this.startclientX - e.clientX
      const y = this.startclientY - e.clientY

      // 计算新位置
      let newRight = this.elRight + x
      let newBottom = this.elBottom + y

      // 确保悬浮球不会被拖出可视区域
      newRight = Math.max(0, Math.min(this.windowWidth - (this.isHovered ? 200 : this.size), newRight))
      newBottom = Math.max(0, Math.min(this.windowHeight - 50, newBottom))

      // 应用新位置
      this.elRight = newRight
      this.elBottom = newBottom
    }
  }
}
</script>

<style scoped>
.drag-ball {
  user-select: none;
  -webkit-user-select: none;
}
</style>